<!--
 * @FileName     :   菜单管理
-->
<template>
  <el-card shadow="never">
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <!-- 菜单 -->
    <el-table
      v-loading="loading"
      row-key="id"
      size="default"
      :data="tableData"
      style="margin-top: 10px"
      :highlight-current-row="true"
    >
      <el-table-column prop="name" label="菜单名称" />
      <el-table-column prop="component" label="前端组件" />
      <el-table-column prop="url" label="权限地址">
        <template #default="scope">
          <!-- <span>{{scope.row.url.split(',').length > 1}}</span> -->
          <el-dropdown v-if="scope.row.url.split(',').length > 1">
            <span class="el-dropdown-link">
              {{ strToArr(scope.row.url, true) }}
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="(item, index) in strToArr(scope.row.url)"
                  :key="index"
                  icon="el-icon-location-outline"
                >
                  {{ item.value }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span v-else>{{ scope.row.url }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" />
      <el-table-column prop="icon" label="图标" />
      <el-table-column label="类型">
        <template #default="scope">
          <el-tag v-if="scope.row.menuType === '3'">按钮</el-tag>
          <el-tag v-if="scope.row.menuType === '1'" type="warning">系统</el-tag>
          <el-tag v-if="scope.row.menuType === '2'" type="success">菜单</el-tag>
          <el-tag v-if="scope.row.menuType === '4'" type="info">字段</el-tag>
          <el-tag v-if="scope.row.menuType === '5'" type="warning">页面</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="300">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleAdd(scope.row)">新增</el-button>
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
          <el-button link type="primary" size="small" @click="handleDelect(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <son ref="sonRef" :get-menu-list="getMenuList" :tree-list="treeList" :tree-data="tableData"></son>
  </el-card>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import { internetApi } from '@/api/api.js'
import { arrayToTree } from '@/utils/tree.js'
import Son from './dialog.vue'

const currentInstance = getCurrentInstance()
const { $request } = currentInstance.appContext.config.globalProperties
const router = useRouter()
const tableData = ref([])
const treeList = ref([])
const loading = ref(true)
const sonRef = ref(null)
// 新增
const handleAdd = (row) => {
  sonRef.value.openDialog(row, 'add')
  console.log('新增')
}
// 修改
const handleEdit = (row) => {
  sonRef.value.openDialog(row, 'edit')
  console.log('修改')
}
// 删除
const handleDelect = (row) => {
  ElMessageBox.confirm(`你确定要删除${row.name}吗?`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await $request(internetApi.deleteMenu, { id: row.id })
      getMenuList()
      ElMessage({
        type: 'success',
        message: '操作成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作'
      })
    })
}
// 权限地址：编辑格式处理
const strToArr = (data, first) => {
  const ds = data.split(',') || []
  const newArr = ds.map((item) => {
    return {
      value: item
    }
  })
  if (first) {
    return newArr[0].value
  } else {
    // newArr.shift()
    return newArr
  }
}
// 获取菜单列表
const getMenuList = () => {
  $request(internetApi.getMenuList).then((res) => {
    treeList.value = res.data
    tableData.value = arrayToTree(res.data, { pid: 'parentId', rootId: '0' })
    loading.value = false
    console.log('1----------------------------------->', tableData.value)
  })
}
onMounted(() => {
  getMenuList()
})
</script>
